.main-banner {
  background-color: #fff;
  position: relative;
  // height: 380px;
  filter: 0;

  // overflow: hidden;
  .next-item {
    width: 37px;
    height: 63px;
    // background-color: #646464;
    position: absolute;
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f2f2f2;
    font-size: 24px;

    &:nth-child(1) {
      transform: rotate(180deg);
      top: calc(50% - 32px);
      // background: ;
      // background-image: url();
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }

  .prov {
    left: auto;
    right: -100px;
  }

  img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

.banner-warp {
  position: relative;
  overflow: hidden;

  .bannerBg {
    position: absolute;
    filter: blur(20px) contrast(1);
    overflow: hidden;
    left: -100px;
    right: -100px;
    bottom: -100px;
    top: -100px;
    &::after {
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      content: '';
    }
  }
}
